<script setup lang="ts">
import {onMounted, reactive} from 'vue';
import {BasicTable,useTable} from '@/components/Table';
import {useDrawer} from '@/components/Drawer';
import {POST} from '@/api/http';
import {getLabel, platformType} from '@/api/ds';
import Header from '@/widget/header.vue';
import Content from '@/widget/content.vue';

import {
    formatOperatingPeriod,
  } from '@/views/basics/shop/util';

import Detail from './detail.vue';

const [registerDetail, { openDrawer }] = useDrawer();

  const state = reactive({ onlineDataSource: [] });
  const form = reactive({});

  const [registerTable] = useTable({
    columns: [
      {
        title: '合作平台',
        dataIndex: 'platformType',
        ellipsis: false,
        customRender: ({ value }) => getLabel(platformType, value) || value,
      },

      {
        title: '平台ID',
        dataIndex: 'platformStoreCode',
        ellipsis: false,
      },
      {
        title: '合作版本',
        dataIndex: 'platformVersion',
        ellipsis: false,
      },

      {
        title: '上线时间',
        dataIndex: 'platformBeginDate',
        ellipsis: false,
      },

      {
        title: '到期时间',
        dataIndex: 'platformEndDate',
        ellipsis: false,
      },

      {
        title: '账号',
        dataIndex: 'platformAccount',
        ellipsis: false,
      },

      {
        title: '密码',
        dataIndex: 'platformPassword',
        ellipsis: false,
      },
    ],
    useSearchForm: false,
    showTableSetting: false,
    bordered: true,
    showIndexColumn: false,
    rowKey: 'id',
    scroll: { y: 180 },
    pagination: false,
  });

  function onEdit() {
    openDrawer(true, {
      behavior: 'edit',
    });
  }

  onMounted(() => {
    onLoad();
  });

  function onLoad() {
    POST('/shop/getStoreInfoByPara').then((list) => {
      const detail = list?.[0] ?? {};
      Object.assign(form, detail);
    });

    POST('/shop/getStoreOnlineInfoByPara').then((list) => {
      state.onlineDataSource = list || [];
    });
  }
</script>

<template>
  <div class="tp">
    <Header />

    <Content>
      <div class="cp">
        <div class="card">
          <div class="c-title"> 基础信息 </div>

          <a-flex gap="large" class="row">
            <div class="cell f1">
              <div class="label">门店编码</div>
              <div class="d-medium value">{{ form.storeCode }}</div>
            </div>

            <div class="cell f1">
              <div class="label">门店名称</div>
              <div class="value">{{ form.shortName }}</div>
            </div>

            <div class="cell f1">
              <div class="label">法人代表</div>
              <div class="value">{{ form.corpDeputy }}</div>
            </div>

            <div class="cell f1">
              <div class="label">店长姓名</div>
              <div class="value">{{ form.storeManager }}</div>
            </div>
          </a-flex>

          <a-flex gap="large" class="row">
            <div class="cell f1">
              <div class="label">加盟时间</div>
              <div class="d-medium value">{{ form.joinDate }}</div>
            </div>

            <div class="cell f1">
              <div class="label">门店座机</div>
              <div class="d-medium value">{{ form.storeLandline }}</div>
            </div>

            <div class="cell f1">
              <div class="label">门店手机</div>
              <div class="d-medium value">{{ form.storeMobile }}</div>
            </div>

            <div class="cell f1">
              <div class="label">营业时间</div>
              <div class="value">
                <div
                  v-for="(item, index) in formatOperatingPeriod(form.operatingPeriod)"
                  :key="index"
                  class="op-row"
                >
                  <span class="d-medium op-time" v-html="item.timeDesc"></span>
                  <span class="op-week">({{ item.weekDesc }})</span>
                </div>
              </div>
            </div>
          </a-flex>

          <a-flex gap="large" class="row">
            <a-flex gap="large" class="row flex-1 border-none">
              <div class="cell f1">
                <div class="label">门头照片</div>
                <div
                  class="picture"
                  :style="`background-image:url(&quot;${form.doorstepImgurl || ''}&quot;);`"
                ></div>
              </div>

              <div class="cell f1 !border-r-1 !border-r-solid">
                <div class="label">营业执照</div>
                <div
                  class="picture"
                  :style="`background-image:url(&quot;${form.bizlicImgurl || ''}&quot;);`"
                ></div>
              </div>
            </a-flex>
            <a-flex gap="large" class="row flex-1">
              <div class="cell f2">
                <div class="label">门店地址</div>
                <div class="value address-bg">{{form.storeRca}}{{ form.storeAddr }}</div>
              </div>
            </a-flex>
          </a-flex>
        </div>

        <div class="card mt-20px">
          <div class="c-title"> 总部合作平台 </div>
          <BasicTable
            @register="registerTable"
            :dataSource="state.onlineDataSource"
          />
        </div>

        <div class="use card edit" @click="onEdit">
          <a-flex gap="small" justify="center">
            <EditOutlined />
            <span>编辑门店资料</span>
          </a-flex>
        </div>
      </div>
    </Content>

    <Detail @register="registerDetail" @complete="onLoad" />
  </div>
</template>

<style lang="less" scoped>
  .card {
    padding: 16px 20px;
    background-color: #fff;

    .c-title {
      padding: 0 6px;
      color: #091f3d;
      font-size: 15px;
      font-weight: 600;
    }

    .row {
      border-bottom: 1px solid #eef1f6;
    }

    .row:last-of-type {
      border-bottom: 0;
    }

    .f1 {
      flex: 1;
    }

    .f2 {
      flex: 2;
    }

    .cell {
      margin: 24px 0;
      padding: 12px 0;
      border-right: 1px solid;
      border-image: linear-gradient(
          180deg,
          rgb(238 241 246 / 0%),
          rgb(238 241 246 / 100%),
          rgb(238 241 246 / 100%),
          rgb(238 241 246 / 0%)
        )
        1 1;

      .label {
        color: #8592a6;
        font-size: 13px;
        font-weight: 400;
      }

      .value {
        margin-top: 6px;
        color: #091f3d;
        font-size: 14px;
        font-weight: 600;
      }

      .picture {
        width: 100%;
        height: 90px;
        margin-top: 6px;
        background-repeat: no-repeat;
        background-size: contain;
      }

      .address-bg {
        width: 100%;
        height: 90px;
        // background-image: url('@/assets/images/address-bg.png');
        background-repeat: no-repeat;
        background-size: contain;
      }

      .op-row {
        margin: 4px 0;

        .op-time {
          color: #091f3d;
        }

        .op-week {
          margin-left: 6px;
          color: #8592a6;
          font-size: 12px;
        }
      }
    }

    .cell:last-of-type {
      border-right: 0;
    }

    .table {
      margin-top: 12px;
    }
  }

  .edit {
    margin-top: 16px;
    color: @primary-color;
    font-size: 13px;
  }

  ::v-deep(.ant-table-wrapper .ant-table-thead > tr > th) {
    background-color: #eef1f6;
  }
</style>
